<template>
    <v-card class="video-management-card rounded-xl" elevation="0">
        <div class="tabs-header">
            <v-tabs 
                v-model="tab" 
                color="#7C9CBF"
                bg-color="rgba(124, 156, 191, 0.05)"
                slider-color="#7C9CBF"
                align-tabs="center"
                class="video-tabs"
                height="64"
            >
                <v-tab v-for="(item, index) in items" :key="index" class="tab-item">
                    <v-icon class="mr-2">{{ getTabIcon(index) }}</v-icon>
                    {{ item }}
                </v-tab>
            </v-tabs>
        </div>
        <v-divider class="tabs-divider" />
        <v-window v-model="tab" class="tab-content">
            <!-- 发布稿件(视频) -->
            <v-window-item value="0">
                <UploadVideo></UploadVideo>
            </v-window-item>
            <!-- 批量上传视频 -->
            <v-window-item value="1">
                <BatchUploadVideo></BatchUploadVideo>
            </v-window-item>
            <!-- 管理稿件(视频) -->
            <v-window-item value="2">
                <videoList></videoList>
            </v-window-item>
        </v-window>
    </v-card>
</template>
<script setup>
import { provide, ref } from 'vue';
import UploadVideo from './upVideo.vue';
import BatchUploadVideo from './batchUpload.vue';
import videoList from './videoList.vue';
const tab = ref(0)

// 提供tab值给子组件
provide('tab', tab);

const items = ref([
    '上传稿件', '批量上传', '稿件管理'
])

// 获取对应标签的图标
const getTabIcon = (index) => {
    const icons = ['mdi-upload', 'mdi-file-upload-outline', 'mdi-view-list'];
    return icons[index] || 'mdi-video';
}
</script>

<style scoped>
.video-management-card {
    overflow: hidden;
    background-color: #1a1b25;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.tabs-header {
    position: relative;
    overflow: hidden;
}

.tabs-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(124, 156, 191, 0.1), transparent 70%),
        radial-gradient(circle at 90% 20%, rgba(124, 156, 191, 0.05), transparent 70%);
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

.video-tabs {
    position: relative;
    z-index: 1;
}

.tab-item {
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    height: 64px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.tab-item:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}

.tabs-divider {
    background: linear-gradient(90deg, rgba(124, 156, 191, 0.3), transparent);
    height: 1px;
}

.tab-content {
    padding: 16px;
}
</style>